<template>
<div>
    <el-dialog title="图片预览" :visible="state" width="70%" center @close="guanbi" top="3vh" class="tupianDia">
        <!-- <div class="datuzhanwei">
            <img :src="this.lujin" alt />
      </div>-->
        <div class="imgBox clear">
            <div :class="[fileList.length>1 ? 'imgYL' : 'imgYL2' ]" v-for="item in fileList" :key="item.uid">
                <img :src="item.url" alt />
                <div class="zhe">
                    <div class="icon">
                        <!-- <span class="el-icon-zoom-in" @click="aaa(item)"></span> -->
                        <span class="el-icon-delete" @click="shanchu(item)"></span>
                    </div>
                </div>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="guanbi">取 消</el-button> -->
            <el-button type="primary" @click="guanbi">关闭预览</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            lujin: "",
        };
    },
    props: ["state", "fileList"],
    methods: {
        guanbi() {
            this.$emit("guanbi");
        },
        // aaa(item) {
        //     this.lujin = item.url;
        // },
        shanchu(item) {
            console.log(11111);
            this.$emit("shanchu", item);
        },
    },
};
</script>

<style lang="less" scoped>
.imgBox {
    // width: 100%;
    text-align: center;
}

.imgYL {
    width: 45%;
    float: left;
    // margin: 0 10px 10px 0;
    margin: 0 2.5%;
    position: relative;

    img {
        width: 100%;
    }
}

.zhe {
    width: 100%;
    height: 100%-5px;
    // border: 1px solid red;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    // margin: 0 10px 10px 0;
    display: none;
}

.icon {
    // border: 1px solid red;
    width: 72px;
    height: 26px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    cursor: pointer;

    span {
        font-size: 26px;
        color: #fff;
        margin: 0 5px;
    }
}

.imgYL:hover .zhe {
    display: block;
}

.datuzhanwei {
    width: 80%;
    height: 300px;
    border: 1px solid red;

    img {
        height: 100%;
    }
}

.tupianDia .el-dialog__header {
    display: none;
}

// .tupianDia .el-dialog__body {
//     height: 70vh;
// }

.imgYL2 {
    width: 80%;
    float: left;
    margin: 0 10%;
    position: relative;

    img {
        width: 100%;
    }
}
</style>
